<template>
    <div class="bigdiv">

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            {{ number }}
        </van-divider>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            {{ equipmentName }}
        </van-divider>
        <van-form>
            <van-field v-model="fieldValue" is-link readonly label="接收人" placeholder="请选择接收人" @click="show = true" />
            <van-popup v-model:show="show" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择接收人" :options="options" @close="show = false"
                    :field-names="fieldNames" @finish="onFinish" />
            </van-popup>
            <van-cell-group>
                <van-field v-model="changefrom.entry_name" name="项目名称" label="项目名称" placeholder="项目名称"
                    :rules="[{ required: true, message: '请填写项目名称' }]" />
            </van-cell-group>
        </van-form>

        <van-button @click="changeok" type="primary" block v-show="spztVAlue != 3">提交</van-button>
        <van-button v-show="spztVAlue == 3" type="primary" block disabled>审批中</van-button>
        <br />
        <van-button @click="closemine('addEvent', false)" type="primary" block>取消</van-button>
    </div>
</template>

<script setup>
import { defineProps, onMounted, defineEmits, ref } from 'vue';
import { getjieshoulist, submitSQ } from "../../sevce/user";
import { showToast } from 'vant';
import { showNotify } from 'vant';
const props = defineProps({
    number: String,
    id: Number,
    equipmentName: String,
    entryName: String,
    model: String,
    realDepartment: String,
    serialNumber: String,
    projectLeader: String,
    applicationTime: String,
    position: String,
    model: String,
    customer_drive: String,
    usageSituation: String,
    equipment_status: String,
    process_status: String,
    remarks: String,
    realDepartment: Number,
    processStatus: Number,
})
//项目名称
let entryNameFrom = ref('')
//备注
let remarksFrom = ref('')
//接收人选择
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
//自定义字段名
let fieldNames = {
    text: 'names',
    value: 'id',
    children: 'users',
}
const options = ref([]);
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
    changefrom.value.recipient = selectedOptions[1].names
    // console.log( console.log(selectedOptions[0].tnameId))
    changefrom.value.real_department = selectedOptions[0].tnameId

    show.value = false;
    fieldValue.value = selectedOptions.map((option) => option.names).join('/');
    //办公室绑定
    if (changefrom.value.recipient == '何微') {
        changefrom.value.entry_name = '办公室'
        // console.log('绑定')
    }
};
//获取接收人数据
function getpplist() {
    getjieshoulist().then((res) => { options.value = res.data })
}
//向父组件传参,关闭本窗口
const closemine = defineEmits(['addEvent']) //addEvent是父元素里面的一个函数方法，通过这个方法传参
// //执行关闭
// const closechange = () => {
//     closemine('addEvent', false)
// }

//修改信息
const changefrom = ref({
    id: 0,
    // number: props.number,
    real_department: 0,//目标部门
    project_leader: JSON.parse(localStorage.getItem('userinfo')).names,
    entry_name: '',
    button_code: 1,
    recipient: '',
    approver: 'vivi',
})
//修改确认
//equipment/apply_api?&id=1&number=ZXLT-DN2-001&real_department=1&project_leader=项目负责人&entry_name=项目点名称&button_code=1&approver=审批人&recipient=接收人"
function changeok() {
    if (changefrom.value.recipient != '' && changefrom.value.entry_name != '') {
        submitSQ(changefrom.value).then((res) => {
            // console.log('提交申请')
            closemine('addEvent', false)
            showToast('已提交');
            //清空数据

        })
        // closemine('addEvent', false)
    } else {
        showNotify({ type: 'danger', message: '填写项目名称和接收人' });
    }
}
//审批状态
let spztVAlue = ref()
//初始赋值
function fz() {
    changefrom.value.id = props.id
    spztVAlue.value = props.processStatus
}
onMounted(() => {
    // console.log(props)
    fz()
    getpplist()

})
</script>

<style lang="scss" scoped>
.bigdiv {
    margin: 0 10px 0 30px;
}
</style>